import { createApp, nextTick } from 'vue';
import { createRouter, createWebHistory } from 'vue-router'

import App from './App.vue';

import UseAlipayOrWechat from './components/UseAlipayOrWechat.vue'
import SrReturn from './components/SrReturn.vue'
import Login from './components/Login.vue'
import Registry from './components/Registry.vue'
import Index from './components/Index.vue'
import BindCard from './components/BindCard.vue'
import Pay from './components/Pay.vue'

const routes = [
  { 
    path: '/', 
    component: Index, 
    meta: { 
      title: '欢迎来到Stripe支付测试'
     } 
  },
  { 
    path: '/login', 
    component: Login, 
    meta: { 
      title: '登录'
     } 
  },
  { 
    path: '/return', 
    component: SrReturn, 
    meta: { title: 'Return' } 
  }, 
  {
    path: '/registry',
    component: Registry,
    meta: { title: "注册"}
  },
  {
    path: '/bindCard',
    component: BindCard,
    meta: { title: "绑定银行卡"}
  },
  {
    path: '/pay',
    component: Pay,
    meta: { title: "支付"}
  },
  {
    path: '/useAlipayOrWechat',
    component: UseAlipayOrWechat,
    meta: { title: "使用支付宝支付"}
  },
]

const history = createWebHistory();

const router = new createRouter({
  history,
  routes
});

router.afterEach((to) => {
  nextTick(() => {
    document.title = to.meta.title || 'Payment';
  });
});

createApp(App).use(router).mount('#app');
